<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use frontend\assets\AppAsset;
use common\widgets\Alert;
use common\components\Config;
use common\components\Tools;

$list = Tools::getTopmenu();

$controllerID = Yii::$app->controller->id;

$actionID = Yii::$app->controller->action->id;

$url = $controllerID . "/" . $actionID;

AppAsset::register($this);

$pre_url = Yii::$app->params['imgurl'];

$logo = $pre_url . Tools::getValue('site_logo');

$qq = Tools::getValue('site_qq');
$phone = Tools::getValue('site_phone');

$qq2 = Tools::getValue('site_qq_two');
$phone2 = Tools::getValue('site_phone_two');

$qq_modal = Tools::getValue('modal_qq');

$site_keyword = Tools::getValue('site_keyword');
$site_description = Tools::getValue('site_description');
$site_title = Tools::getValue('site_title');
$this->registerCss("

");

?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="<?=$site_keyword?>">
    <meta name="Description" content="<?=$site_description?>">
    <meta name=“baidu-site-verification” content=“AoPI6dvSVn” />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <?= Html::csrfMetaTags() ?>
    <?php if(empty($this->title)){ ?>
        <title><?=$site_title?></title>
    <?php }else{ ?>
        <title><?= Html::encode($this->title) ?></title>
    <?php }?>
    <?php $this->head() ?>

    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
    <style type="text/css">
        body{margin: 0px;padding: 0px;font-family: sans-serif;background-color: #F7F7F7}
        a{text-decoration: none;}
        #header{width:100%;}
        #header .header-content{margin:0 auto;}
        #header .logo{margin: 0px 12%}
        #header .logo img{width:26%}
        #header .menu{display: flex;align-items: center;text-align: center;}
        #header .menu-item{flex:1;font-size: 16px;color:#fff;padding: 10px 10px 0px 10px;text-decoration: none}
        #header .menu-item.active{background-color: #FFD931}

        .side-contect{position: fixed;top:30%;right:0px;width:160px;background: #F6C900;border-top-left-radius:12px;border-bottom-left-radius:12px;padding: 16px 0px 16px 10px}
        .side-contect .title{font-size:12px;color:#fff;text-align: center;}
        .side-contect .title span{margin-right: 5px}
        .side-contect .title img{width:18px;}
        .side-contect .content-one{width:100%;background: #fff;border-top-left-radius:12px;border-bottom-left-radius:12px;padding: 10px 0px;text-align: left;}
        .side-contect .content-one .qq{font-size:12px;color:#fff;color:#333}
        .side-contect .content-one .qq img{width:16px;margin-right: 7px;}
        .side-contect .content-one .phone{font-size:12px;color:#fff;color:#333}
        .side-contect .content-one .phone img{width:16px;margin-right: 5px;}
        .side-contect .content-one .qrcode-title{font-size: 10px;}
        .side-contect .content-one .qrcode img{width:85px}

        .side-contect-left{
            position: fixed;
            top:35%;
            left:0px;
            width:160px;
            background: #F6C900;
            border-top-right-radius:12px;
            border-bottom-right-radius:12px;
            padding: 16px 10px 16px 0px
        }
        .side-contect-left .title{font-size:12px;color:#fff;text-align: center;}
        .side-contect-left .title span{margin-right: 5px}
        .side-contect-left .title img{width:20px;margin-top: -4px}
        .side-contect-left .content-one{
            width:100%;
            background: #fff;
            border-top-right-radius:12px;
            border-bottom-right-radius:12px;
            padding: 10px;
            text-align: left;
        }

        .side-contect .content-two{width:100%;background: #fff;border-top-left-radius:12px;border-bottom-left-radius:12px;padding: 10px 0px;text-align: center;}
        .side-contect .desc{font-size: 12px;color:#9F9F9F;padding: 10px;text-align: justify;margin-bottom: 0px}

        .page-contact{margin: 60px 12%;background: #fff;display: flex;height:360px;box-shadow: 0 0 5px #fff}
        .contact-left{flex: 1;width:100%;height:100%;background: url(/img/liuyan@2x.png) no-repeat center;background-size:cover;text-align: center;}
        .contact-left .title{font-size: 28px;color:#fff;font-weight: 500;padding-top: 40px}
        .contact-left .desc{font-size: 18px;color:#fff;font-weight: 300;letter-spacing: 1px;text-decoration: none;}
        .contact-right{flex: 1;}
        .contact-right-inner{width:100%;height:100%;padding:40px 12%;}
        input{width:100%;height:44px;background:#F4F4F6;outline:none;border:0px;padding-left:15px}
        textarea{height:100px;width:100%;background:#F4F4F6;outline:none;border:0px;padding:15px}
        button{width:100%;height:44px;margin-top:30px;background:#F6C900;color:#fff;font-size:18px;line-height44px;outline:none;border:0px}
        ul li{list-style: none;}
        .layui-layer-molv .layui-layer-title {
            background: #2F5ECA !important;
            color: #fff;
            border: none;
        }
        .layui-layer-molv .layui-layer-btn a {
            background: #2F5ECA !important;
        }
        .layui-layer-dialog {
            min-width: 360px !important;
        }
        .layui-layer-content{text-align: center}
        .link-list{margin: 40px 12% 15px 12%;}
        .link-list ul{padding: 0px;margin: 0px}
        .link-list ul li{list-style: none;float: left;padding: 0px 20px;height:40px}
        .link-list ul li a{color:#fff;letter-spacing: 1px;}
        .link-list ul li:hover a{font-size: 16px;color:#FFD931;transition: all 0.5s;}

        .modal-contact{display: none;z-index: 999;text-align: center;width:420px;height:260px;background: #fff;position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);border-radius: 6px;box-shadow: 0 0 16px #ccc}
        .modal-contact .title{color:#f9ab2d;font-size: 26px;margin-top: 50px}
        .modal-contact .sub-title{font-size: 20px;color:rgb(118, 118, 118);margin-top: 15px;}
        .modal-contact .action{display: flex;align-items: center}
        .modal-contact .btn-close{width:140px;height:36px;background:#ccc;color:rgb(119, 119, 119);font-size: 14px;border-radius: 6px;outline: none;}
        .modal-contact .btn-contact{text-decoration: none;display: block;margin: 30px auto 0px auto;line-height: 36px;width:140px;height:36px;background: #f9ab2d;color:#fff;font-size: 14px;border-radius: 6px;outline: none;}

    </style>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?6d6d2be7d17b09986f5065cf030ac590";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>
<body>
<?php $this->beginBody() ?>

<div class="body">

    <div id="header">
        <div class="header-content">
            <div style="position: relative">
                <img src="/img/header-bg.jpeg" alt="银杏树论文网" style="width:100%">
                <div style="position: absolute;top:30%;left:0px;width:100%">
                    <p class="logo"><a href="/"><img src="<?=$logo?>" alt="银杏树论文网" style="width:20%"></a></p>
                </div>
            </div>
            <div class="menu" style="background: #F6C900;padding: 0 12%">

                <a class="menu-item <?php if($url == 'default/index'){echo 'active';}?>" href="/">
                    <p>网站首页</p>
                </a>

                <?php foreach($list as $v){ ?>
                    <?php if($v['code'] != '/'){?>
                        <a class="menu-item <?php if(strpos($v['code'],$url)!==false){echo 'active';}?>" href="<?=$v['code']?>">
                            <p><?=$v['title']?></p>
                        </a>
                    <?php }?>
                <?php }?>
            </div>
        </div>
    </div>

    <div class="">
    
        <?= $content ?>
       
    </div>

</div>

<div class="page-contact">
    <div class="contact-left">
        <p class="title">在线留言</p>
        <p class="desc">CONTACT US</p>
    </div>
    <div class="contact-right">
        <div class="contact-right-inner">
            <div class="form-item">
                <input id="contact-name" type="text" name="" placeholder="姓名">
            </div>
            <div class="form-item" style="margin-top: 10px">
                <input id="contact-phone" type="text" name="" placeholder="手机号码">
            </div>
            <div class="form-item" style="margin-top: 10px">
                <textarea id="contact-content" rows="3" placeholder="留言内容…"></textarea>
            </div>
            <button type="button" id="submit" style="">提交</button>
        </div>
    </div>
</div>

<div style="width:100%;background: #F6C900;padding:30px 0px;text-align: center">
    <p style="font-size: 28px;color: #fff;">友情链接</p>
    <p style="font-size: 18px;color: #fff;font-weight:300;">Links</p>
    <div class="link-list" style="">
        <ul>
            <?php foreach(Tools::getLinkList() as $v){ ?>
                <li><a href="<?=$v['url']?>" target="_blank" title="<?=$v['title']?>"><?=$v['title']?></a></li>
            <?php }?>
        </ul>
        <div class="clearfix"></div>
    </div>
</div>



<div class="side-contect">
    <p class="title"><span><img src="/img/kefu@2x.png"></span>论文客服</p>
    <div class="content-one">
        <p class="qq" style="padding-left: 30px"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=<?=$qq?>&site=qq&menu=yes"><span><img src="/img/qq2.png"></span><?=$qq?></a></p>
        <p class="phone" style="padding-left: 30px"><a href="javascript:;" class="cphone"><span><img src="/img/phone.png"></span><?=$phone?></a></p>
    </div>

    <p class="title" style="margin-top: 10px"><span><img src="/img/xieshou@2x.png"></span>写手加盟及投诉</p>

    <div class="content-one" style="padding-bottom: 0px">
        <p class="qq" style="padding-left: 30px"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=<?=$qq2?>&site=qq&menu=yes"><span><img src="/img/qq2.png"></span><?=$qq2?></a></p>
        <p class="phone" style="padding-left: 30px"><a href="javascript:;" class="cphone"><span><img src="/img/phone.png"></span><?=$phone2?></a></p>
        <p class="desc">加盟要求：写手需具备本科及本科以上学历，并且取得相关学位证书。硕士及硕士以上学历、高校教师、985院校，并且在国家级期刊发表过论文者优先。</p>
    </div>
</div>

<div class="side-contect-left">
    <p class="title"><span><img src="/img/icon-bao.png"></span>业务范围</p>
    <div class="content-one">
        <p style="color:#9F9F9F;font-size: 12px;font-weight: 300;line-height: 2;text-align: justify"><?=Tools::getValue('site_side_left')?></p>
    </div>
</div>

<div class="modal-contact">
    <p class="title">请问您需要咨询什么内容?</p>
    <p class="sub-title">让客服帮你解决问题！</p>
    <div class="action">
        <div style="flex: 1">
            <button class="btn-close">稍后再说</button>
        </div>
        <div style="flex: 1">
            <a href="http://wpa.qq.com/msgrd?v=3&uin=<?=$qq_modal?>&site=qq&menu=yes" target="_blank" class="btn-contact">立即咨询</a>
        </div>
    </div>
</div>


<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

<script type="text/javascript" src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script type="text/javascript">

    $('#submit').click(function(){
        
        var name = $('#contact-name').val();
        if(!name){
            layer.msg('姓名不能为空');
            return;
        }

        var phone = $('#contact-phone').val();
        if(!phone){
            layer.msg('电话号码不能为空');
            return;
        }

        var cont = $('#contact-content').val();
        if(!name){
            layer.msg('留言内容不能为空');
            return;
        }

        if(!isPhoneNo(phone)){
            layer.msg('电话号码格式不正确');
            return;
        }

        var sta = true;
        if(sta){
            sta = false;
            $.ajax({
                url : '/home/default/check',
                type: 'POST',
                data: {
                    'username' : name,
                    'phone' : phone,
                    'cont' : cont,
                },
                dataType:'json',
                success: function (res) {
                    sta = true;
                    if(res.code == 200){
                        layer.msg('留言成功');
                    }else{
                        layer.msg(res.message);
                    }
                    console.log(res);
                },
                error:function(err){
                    console.log(err);
                }
            });
        }

    });

    $('.cphone').click(function(){
        layer.alert("联系电话 <?=$phone?>", {
            skin: 'layui-layer-molv' //样式类名
            ,closeBtn: 0
        });
    });

    function isPhoneNo(phone) {
        var pattern = /^1[34578]\d{9}$/;
        return pattern.test(phone);
    }

    $('.btn-close').click(function () {
        $('.modal-contact').fadeOut(500);
    });

    setTimeout(function(){
        $('.modal-contact').fadeIn(500);
    }, 6000);

</script>